<template>
  <div 
    class="upload-area" 
    :class="{ 'drag-over': isDragOver }"
    @click="selectFile"
    @dragover.prevent="handleDragOver"
    @dragleave.prevent="handleDragLeave"
    @drop.prevent="handleDrop"
  >
    <template v-if="!modelValue">
      <i class="fas fa-cloud-upload-alt upload-icon"></i>
      <p class="upload-text">点击上传，单个文件不超过{{ maxSize }}M</p>
      <p class="upload-hint">{{ description }}</p>
      <button class="btn-select" type="button">选择文件</button>
    </template>
    
    <template v-else>
      <i class="fas fa-file-word upload-icon" style="color: #2b579a;"></i>
      <p class="upload-text">{{ modelValue.name }}</p>
      <p class="upload-hint">{{ (modelValue.size / (1024 * 1024)).toFixed(2) }} MB</p>
      <button class="btn-select" type="button">更换文件</button>
    </template>
    
    <input 
      ref="fileInput"
      type="file" 
      class="file-input" 
      :accept="accept"
      @change="handleFileChange"
    >
  </div>
</template>

<script setup lang="ts">
import { useFileUpload } from '../scripts/fileUpload'

interface Props {
  modelValue: File | null
  accept?: string
  maxSize?: number
  description?: string
}

const props = withDefaults(defineProps<Props>(), {
  accept: '*',
  maxSize: 10,
  description: '支持常见文件格式'
})

const emit = defineEmits<{
  'update:modelValue': [file: File | null]
}>()

const {
  fileInput,
  isDragOver,
  selectFile,
  handleFileChange,
  handleDragOver,
  handleDragLeave,
  handleDrop
} = useFileUpload(props, emit)
</script>

<style scoped>
.upload-area.drag-over {
  border-color: var(--primary);
  background-color: rgba(67, 97, 238, 0.05);
}
</style>